<template>
	<view class="clearfix">
		<scroll-view scroll-x class="top">
			<!-- <view class="nav_wrap">
				<view class="cu-item" :class="index == TabCur ? 'active' : ''" v-for="(item, index) in navData" 
					:key="index" @tap="tabSelect" :data-id="index">{{ item }}</view>
					
			</view> -->
			<view class="tab">
				<view class="tab_nav" style='font-size:12px'>
					<view class="setTab" v-for="(item, index) in navData" :key="index" :data-index="index" :data-sortb="item.sortStatus"
					:class=" index == TabCur ? 'active' : ''" @tap="tabSelect" :data-id="index">
						{{item}}</view>
				</view>
			</view>
		</scroll-view>
		<view class="con_wrap">
			<!-- 商业贷款 -->
			<view v-if="TabCur == 0">
				<form>
					<view class="cu-form-group">
						<view class="title">计算方式</view>
						<picker @change="PickerChange" :value="index" :range="loanData" class="pic_wrap">
							<view class="picker">{{ loanData[index] }} <text class="uniicons">&#xe583</text></view>
						</picker>
					</view>
					<view class="cu-form-group">
						<view class="title">商贷金额</view>
						<input v-model="commercialLoanAmount" name="input" type="number" class="text-right" />
						<view>万</view>
					</view>
					<view class="cu-form-group ">
						<view class="title">商贷年限</view>
						<picker @change="yearChange" :value="index" :range="years">
							<view class="picker">{{ years[yearIndex] }}年<text class="uniicons">&#xe583</text></view>
						</picker>
					</view>
			
					<view class="cu-form-group ">
						<view class="title">利率方式</view>
						<picker @change="rateChange" :value="index" :range="rateMode">
							<view class="picker">
								{{ rateMode[rateIndex] }}
								<text class="uniicons">&#xe583</text>
							</view>
						</picker>
					</view>
					<view class="cu-form-group">
						<view class="title">LPR</view>
						<input name="input" class="text-right" type="number" v-model="lpr" />
						<text class="">%</text>
					</view>
					<view class="cu-form-group" v-if="rateIndex == 0">
						<view class="title">基点</view>
						<input v-model="basisPoint" name="input" type="number" class="text-right" />
						<text class="">‰</text>
					</view>
					<view class="cu-form-group b_line">
						<view class="title">商贷利率</view>
						<input placeholder="" name="input" type="number" class="text-right" v-model="commercialLoanRate" />
						<text class="">%</text>
					</view>
				</form>
			</view>
			<!-- 公积金贷款 -->
			<view v-if="TabCur == 1">
				<form>
					<view class="cu-form-group margin-top">
						<view class="title">计算方式</view>
						<picker @change="PickerChange" :value="index" :range="loanData">
							<view class="picker">
								{{ loanData[index] }}
								<text class="uniicons">&#xe583</text>
							</view>
						</picker>
					</view>
			
					<view class="cu-form-group">
						<view class="title">公积金金额</view>
						<input v-model="reserveAmount" type="number" name="input" class="text-right" />
						<text>万</text>
					</view>
					<view class="cu-form-group ">
						<view class="title">公积金年限</view>
						<picker @change="yearChange" :value="index" :range="years">
							<view class="picker">{{ years[yearIndex] }}
								<text class="uniicons">&#xe583</text>
							</view>
						</picker>
					</view>
					<view class="cu-form-group b_line">
						<view class="title">公积金利率</view>
						<picker @change="reserveChange" :value="index" :range="reserveData">
							<view class="picker">{{ reserveData[reserveIndex] }}<text class="uniicons">&#xe583</text></view>
						</picker>
					</view>
				</form>
			</view>
			<!-- 组合贷款 -->
			<view v-if="TabCur == 2">
				<form>
					<view class="cu-form-group margin-top">
						<view class="title">计算方式</view>
						<picker @change="PickerChange" :value="index" :range="loanData">
							<view class="picker">{{ loanData[index] }}<text class="uniicons">&#xe583</text></view>
						</picker>
					</view>
				<!-- 	<view class="cu-form-group">
						<view class="title">贷款总金额</view>
						<input v-model="commercialLoanAmount" type="number" name="input" class="text-right" />
						<text>万</text>
					</view> -->
					
					<view class="cu-form-group">
						<view class="title">商贷金额</view>
						<input v-model="commercialLoanAmount" type="number" name="input" class="text-right" />
						<text>万</text>
					</view>
			
					<view class="cu-form-group ">
						<view class="title">利率方式</view>
						<picker @change="rateChange" :value="index" :range="rateMode">
							<view class="picker">{{ rateMode[rateIndex] }}<text class="uniicons">&#xe583</text></view>
						</picker>
					</view>
					<view class="cu-form-group">
						<view class="title">LPR</view>
						<input name="input" class="text-right" type="number" v-model="lpr" />
						<text class="">%</text>
					</view>
					<view class="cu-form-group" v-if="rateIndex == 0">
						<view class="title">基点</view>
						<input name="input" v-model="basisPoint" type="number" class="text-right" />
						<text class="">‰</text>
					</view>
					<view class="cu-form-group">
						<view class="title">商贷利率</view>
						<input v-model="lpr" name="input" type="number" class="text-right" />
						<text class="">%</text>
					</view>
					<view class="cu-form-group ">
						<view class="title">商贷年限</view>
						<picker @change="sdZhPickerChange" :value="index" :range="years">
							<view class="picker">{{ years[sdYearIndex] }}年<text class="uniicons">&#xe583</text></view>
						</picker>
					</view>
					<view class="" style="height: 20upx;width: 100%; background-color: #EEEEEE;"></view>
			
					<view class="cu-form-group">
						<view class="title">公积金金额</view>
						<input v-model="reserveAmount" name="input" type="number" class="text-right" />
						<text>万</text>
					</view>
					<view class="cu-form-group ">
						<view class="title">公积金年限</view>
						<picker @change="gjjZhPickerChange" :value="index" :range="years">
							<view class="picker">{{ years[gjjYearIndex] }}年<text class="uniicons">&#xe583</text></view>
						</picker>
					</view>
					<view class="cu-form-group b_line">
						<view class="title">公积金利率</view>
						<picker @change="reserveChange" :value="index" :range="reserveData">
							<view class="picker">{{ reserveData[reserveIndex] }}<text class="uniicons">&#xe583</text></view>
						</picker>
					</view>
				</form>
			</view>
			<button  class="btn" style="width: 90%;" @click="calculate">开始计算</button>
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			loanData: ['按贷款总额', '按房屋总价'],
			years: [30, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1],
			TabCur: 0,
			navData: ['商业贷款', '公积金贷款', '组合贷款'],
			// navData: ['商业贷款', '公积金贷款'],
			index: 0,
			rateMode: ['按最新LPR', '按旧版基准利率'],
			rateIndex: 0, //利率类型索引
			yearIndex: 0, //贷款年限索引
			loanIndex: 0, //贷款价格类型索引
			lpr: 4.75, //贷款利率
			reserveData: ['最新基准利率(3.25%)', '最新基准利率上浮10%(3.575%)'],
			reserve: 3.25, //公积金利率
			reserveAmount: 0, //公积金金额
			commercialLoanAmount: 0, //商业贷款金额
			reserveIndex: 0, //公积金利率索引
			basisPoint: 0 ,//基点
			sdYearIndex:0,//组合商贷年限index
			gjjYearIndex:0,//组合公积金年限index
		};
	},
	computed: {
		commercialLoanRate() {
			if (this.rateIndex == 1) {
				return this.lpr;
			} else {
				return this.lpr + this.basisPoint / 100;
			}
		}
	},
	methods: {
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
		},
		PickerChange(e) {
			this.index = e.detail.value;
		},
		sdZhPickerChange(e){
			this.sdYearIndex = e.detail.value;
		},
		gjjZhPickerChange(e){
			this.gjjYearIndex = e.detail.value;
		},
		yearChange(e) {
			this.yearIndex = e.detail.value;
		},
		reserveChange(e) {
			this.reserveIndex = e.detail.value;
		},
		rateChange(e) {
			this.rateIndex = e.detail.value;
			if (this.rateIndex == 1) {
				this.lpr = 4.9;
			} else {
				this.lpr = 4.75;
			}
		},
		
		calculate() {
			
			if (this.TabCur == 0) {
				if(this.commercialLoanAmount <= 0){
					uni.showToast({
						icon:'none',
						title:'必须输入贷款金额'
					})
					return
				}
				let datas ={
					money:this.commercialLoanAmount,
					year:this.years[this.yearIndex],
					lilv:this.commercialLoanRate/100
				}
				uni.navigateTo({
					url:'/pages/house_loan_calculator/result?title=商业贷款&datas='+JSON.stringify(datas)
				})
			}
			if (this.TabCur == 1) {
				if(this.reserveAmount <= 0){
					uni.showToast({
						icon:'none',
						title:'必须输入贷款金额'
					})
					return
				}
				if(this.reserveIndex == 0){
					this.reserve = 3.25
				}else{
					this.reserve = 3.575
				}
				if(this.reserveAmount >70){
					uni.showToast({
						icon:'none',
						title:'公积金贷款总额度不超过70万'
					})
					this.reserveAmount = 70;
					return
				}
				let datas ={
					money:this.reserveAmount,
					year:this.years[this.yearIndex],
					lilv:this.reserve/100
				}
				
				uni.navigateTo({
					url:'/pages/house_loan_calculator/result?title=公积金贷款&datas='+JSON.stringify(datas)
				})
			}
			if (this.TabCur == 2) {
				// sdnum, gjjnum, sdyear, gjjyear, sdlilv, gjjlilv
				if(this.reserveIndex == 0){
					this.reserve = 3.25
				}else{
					this.reserve = 3.575
				}
				if(this.reserveAmount >70){
					uni.showToast({
						icon:'none',
						title:'公积金贷款总额度不超过70万'
					})
					this.reserveAmount = 70;
					return
				}
				
				if((this.reserveAmount + this.commercialLoanAmount) <= 0){
					uni.showToast({
						icon:'none',
						title:'必须输入贷款金额'
					})
					return
				}
				
				let datas={
					sdmoney:this.commercialLoanAmount,
					sdyear:this.years[this.sdYearIndex],
					sdlilv:this.commercialLoanRate/100,
					gjjmoney:this.reserveAmount,
					gjjyear:this.years[this.gjjYearIndex],
					gjjlilv:this.reserve/100
				}
				uni.navigateTo({
					url:'/pages/house_loan_calculator/result?title=组合贷款&datas='+JSON.stringify(datas)
				})
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.top{width: 100%;white-space:nowrap; position: fixed; top: var(--window-top);z-index: 99;left: 0;background: $dtg-color-primary;
	/deep/.uni-scroll-view{border-radius: 20rpx 20rpx 0 0;background: #FFFFFF;}
	/deep/.uni-scroll-view::-webkit-scrollbar {display: none}
	.tab {display: flex;flex-direction: column;border-radius: 20rpx 20rpx 0 0;}
	.tab_nav {height: 80rpx;background: #fff;display: flex;line-height: 79rpx;position: relative;color: #999999;font-size: 28rpx;justify-content: space-around;}
	.setTab {text-align: center;height: 80rpx;background-color: white; color:black;font-size: 32rpx;font-weight: bold;}
	.active::after{content: ""; width: 40rpx;height: 4rpx;background: $dtg-color-primary;border-radius: 4rpx;margin: -4rpx auto;display: block;animation: roll .23s linear;}
	@keyframes roll {
	  0%{
	    width:0;
	  }
	
	  100%{
		width: 40rpx;
	  }
	}
	.con{overflow: hidden;}
}
.con_wrap{ margin: 100rpx 0 ; padding-bottom: 40rpx;
	.cu-form-group{height: 110rpx;display: flex;justify-content: space-between;align-items: center;border-top: 1px solid #EEEEEE;margin: 0 30rpx 0;
		input{flex:1;text-align: right;}
	}
	.b_line{
		border-bottom: 1rpx solid #eee;
	}
	.btn{border-radius: 20rpx 20rpx 20rpx;background: #585CF7; color: #FFFFFF;margin-top: 30rpx;}
	.uniicons{font-size: 28rpx;}
}
</style>
